<head>
    <meta charset="UTF-8">
    <title>Time</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>专注Time</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
        .p_1{
            text-align: center;
            font-size: 200%;
        }
        .p_2{
            text-align: left;
        }
        .p_3{
            text-align: right;
        }
        .second{
            color: green;
        }
        .tip{
            color: darkgoldenrod;
        }

        body{
            background: darkseagreen;
        }

        div{
            margin-top: -240px;
            margin-bottom: 200px;
            margin-inside: 200px;
        }
        .form-control1{
            width: 100px;
            margin: auto;
            border-radius: 5px;
            padding-left: 15px;
        }
        .div_2{
            width: 500px;
            height: 500px;
            margin: auto;
            margin-bottom: 100px;
        }
        .btn btn-success{
            width: 100px;
        }
        .pass_time{
            color: red;
        }
        .gold{
            margin-left: 20px;
            margin-top: 10px;
            color: gold;
            text-align: left;
            font-size: 150%;
        }
        .gold_pic{
            width: 30px;
            height: 30px;
            margin-bottom: 10px;
        }
        .btn_shop{
            text-decoration: #5cb85c;
            font-size: 200%;
        }
        .shop_pic{
            width: 40px;
            height: 40px;
            font-size: 150%;
        }

    </style>
</head>
<body id="body">

<form>
    <tr>
        <td>
            <span class="gold">
                    您的金币:<%=gold%>
                </span>
            <img src="../img/gold.png" class="gold_pic" >
        </td>
        <td>
            <span class="p_shop" style="float: right">
                <img src="../img/shop.png" class="shop_pic" >
                <button id = "shop" type="button" class="btn btn-link btn-lg btn_shop">进入商店</button>
            </span>
        </td>
    </tr>
</form>


<div>

    <div>
        <div class="div_2">

            <img id = "tree" src="../img/小树苗.png" class="img-responsive img-circle center-block" >
        </div>
        <p class="p_1">
            <input type="text" name = "minute" class="form-control1" id="input_minute" placeholder="分">:
            <input type="number" name = "second" class="form-control1" id="input_second" placeholder="秒">
            <button id = "button_01" type="submit" class="btn btn-success btn-lg">START</button>
            <br>
            <span class="second" id ="minute">(👆输入时间)</span>
            <span class="second" id ="second"></span>
            <span  id = "rest_1" class="tip">之后，成长为大树</span>
            <br>
            <span id = "rest_2"class="second">你已经专注了📕</span>
            <span class="pass_time" id = "passtime_minute">0</span>
            <span class="second">分</span>
            <span class="pass_time" id = "passtime_second">0</span>
            <span class="second">秒</span><br><br/>
            <button id = "absorbed" type="button" class="btn btn-info btn-lg">专注模式</button>

            <a href="../JSP/shopping.jsp?id=" +id+ ">测试</a>

        </p>

    </div>

</div>



<script>
    var second = document.getElementById("second");
    var minute = document.getElementById("minute");
    var button = document.getElementById("button_01");
    var passtime_second = document.getElementById("passtime_second");
    var passtime_minute = document.getElementById("passtime_minute");
    var rest_1 = document.getElementById("rest_1");
    var rest_2 = document.getElementById("rest_2");
    var absorbed = document.getElementById("absorbed");
    var body = document.getElementById("body");
    var tree = document.getElementById("tree");
    var time;
    var passtime = 0;
    var flag = 0;
    var absorbedtime = 0;
    absorbed.onclick = function () {
        absorbedtime = 1;
    }
    if(absorbedtime == 1){
        $(document).ready(function(){
            $("body").mouseout(function () {
                alert("请回到您的页面，不要分心");
            });
        });
    }
    function turn_to() {
        if(flag == 0){
            alert("时间到啦，休息五分钟");
            time = 300;
            tree.src = "月亮树.png";
            rest_1.innerHTML = "之后，继续学习！😄";
            rest_2.innerHTML = "你已经休息了🥤";
            flag = 1;
        }
        else{
            alert("时间到啦，继续学习");
            tree.src = "小树苗.png";
            rest_1.innerHTML = "之后，成长为大树";
            rest_2.innerHTML = "你已经专注了📕";
            flag = 0;
        }
    }
    function time_reduce() {
        time--;
        passtime++;
        passtime_second.innerHTML =  passtime % 60;
        passtime_minute.innerHTML = parseInt(passtime / 60);
        minute.innerHTML = parseInt(time / 60) + " 分";
        second.innerHTML = time % 60 + "秒";
        if(time == 0 )
            turn_to();
    }

    button.onclick = function start(){
        var input_second = document.getElementById("input_second").value;
        var input_minute = document.getElementById("input_minute").value;
        time = Number(input_second) + Number(input_minute) * 60;
        passtime = 0;
        setInterval(time_reduce,1000);
    }

</script>
</body>
</html>